<template>
    <div class="map-box">
        <div v-if="categroyType==3">
            <div class="acea-row row-center" v-if="screenWidth>576">
                <div class="times">
                    <div class="acea-row row-middle">
                        <div class="acea-row row-column row-center row-middle">
                            <div class="hous">9:00</div>
                            <div class="bold">TUE</div>
                        </div>
                        <div class="iconfont icon-jiantouright"></div>
                        <div class="acea-row row-column row-center row-middle">
                            <div class="hous">16:00</div>
                            <div class="bold">SUN</div>
                        </div>
                    </div>
                    <div class="mt-10">{{ opentime2 }}</div>
                </div>
                <div class="address acea-row row-middle row-center row-column">
                    <div class="bold fs-32">{{ address1 }}</div>
                    <div class="mt-10">{{ address2 }}</div>
                </div>
            </div>
            <template v-else>
                <div class="acea-row row-middle row-center h5-time">
                    <div class="acea-row row-middle row-center">
                        <div class="acea-row row-column row-center row-middle">
                            <div class="hous">9:00</div>
                            <div class="bold">TUE</div>
                        </div>
                        <div class="iconfont icon-jiantouright"></div>
                        <div class="acea-row row-column row-center row-middle">
                            <div class="hous">16:00</div>
                            <div class="bold">SUN</div>
                        </div>
                    </div>
                    <div class="biguan">
                        {{opentime2}}
                    </div>
                </div>
                <div class="acea-row row-middle row-center row-column h5-address">
                    <div class="bold lubiao">{{ address1 }}</div>
                    <div class="mt-5">{{ address2 }}</div>
                </div>
            </template>

            <div class="phone">
                <div>联系电话：{{ phone }}   </div>
                <div class="">邮箱：{{ email }}</div>
            </div>
            
            <div class="mapnav" id="container"></div>
            
        </div>

        <div class="daohangtu" v-else>
            <img class="imgwh" :src="link+images" alt="">
        </div>

    </div>
</template>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=QTZBZ-YI2K6-WIASN-ETZ3P-ORLJV-6BFDS"></script>
<script>
export default{
    name:'MapFrom',
    props:["screenWidth","categroyType","images"],
    data(){
        return {
            scle:15,
            link: localStorage.getItem('link'),
            opentime1:'',
            opentime2:'',
            address1:'',
            address2:'',
            phone:'',
            email:'',
        }
    },
    mounted(){
        this.getopentime1();
        this.getopentime2();
        this.getaddress1();
        this.getaddress2();
        this.getphone();
        this.getemail();
        this.$nextTick(()=>{
            this.init();
        })
    },
    methods: {
        init(){
            var center = new qq.maps.LatLng(22.798014,108.395307);
            var map = new qq.maps.Map(
                document.getElementById("container"),
                {
                    center: center,
                    zoom: this.scle
                }
            );
            var marker = new qq.maps.Marker({
                position: center,
                map: map
            });
        },
        getopentime1(){
            let that = this;
            that._get('/api/web/setting/configKeyObj/web.inform.opentime1').then(res=>{
                that.opentime1 = res.data.data.configValue;
            })
        },
        getopentime2(){
            let that = this;
            that._get('/api/web/setting/configKeyObj/web.inform.opentime2').then(res=>{
                that.opentime2 = res.data.data.configValue;
            })
        },
        getaddress1(){
            let that = this;
            that._get('/api/web/setting/configKeyObj/web.inform.address1').then(res=>{
                that.address1 = res.data.data.configValue;
            })
        },
        getaddress2(){
            let that = this;
            that._get('/api/web/setting/configKeyObj/web.inform.address2').then(res=>{
                that.address2 = res.data.data.configValue;
            })
        },
        getphone(){
            let that = this;
            that._get('/api/web/setting/configKeyObj/web.inform.phone').then(res=>{
                that.phone = res.data.data.configValue;
            })
        },
        getemail(){
            let that = this;
            that._get('/api/web/setting/configKeyObj/web.inform.email').then(res=>{
                that.email = res.data.data.configValue;
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.map-box{
    width: 65%;
    border-top: .0625rem dashed #DED6BF;
    margin: 1.875rem auto;

    .times{
        border-right: .0625rem dashed #DED6BF;
        color: #1E5A54;
        font-size: 1.875rem;
        flex: 1;
        padding: 1.875rem 3.125rem;

        .icon-jiantouright{
            color: #D0B66E;
            margin: 0 .625rem;
        }
    }

    .address{
        flex: 1;
        color: #1E5A54;
        font-size: 1.875rem;
    }
    .phone{
        color: #1E5A54;
        font-size: 1.875rem;
        text-align: center;
        margin-top: 1.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mapnav{
        width: 100%;
        height: 52.6875rem;
        margin: 1.875rem auto;

        .container{
            width: 100%;
            height: 100%;
        }
    }

    .daohangtu{
        width: 100%;
        height: 50rem;
        margin-top: 6.25rem;
        margin: 1.875rem auto;
    }

}

@media screen and (max-width: 36rem) {
    .map-box{
        width: 90%;

        .h5-time{
            font-size: .875rem;
            margin-top: 1.25rem;

            .hous{
                font-size: 1rem;
            }

            .icon-jiantouright{
                color: #D0B66E;
                margin: 0 .625rem;
            }

            .biguan{
                width: 9.375rem;
                margin-left: .9375rem;
            }

        }
        .h5-address{
            font-size: 1rem;
            margin-top: 1.25rem;
        }
        .phone{
            border-top: .0625rem dashed #DED6BF;
            font-size: .875rem;
            padding: 1.25rem 1.25rem 0 1.25rem;
            display: block;
        }

        .mapnav{
            width: auto;
            height: 13.875rem;
        }

        .daohangtu{
            width: auto;
            height: 16.875rem;
            margin-top: 1.25rem;
        }

    }
    
}

</style>